// @mixin 是 Sass 中的一个关键字，用于创建可重用的 CSS 样式规则。
// 通过使用 @mixin，可以创建一组 CSS 样式规则，然后在需要的地方通过 @include 将这组样式规则应用到需要的选择器上。
// 这样可以避免重复编写相同的 CSS 样式规则，提高样式代码的可维护性和可重用性。
@mixin container {
  background-color: var(--white);
  border: var(--border-in-light);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--black);
  background-color: var(--white);
  min-width: 600px;
  min-height: 480px;
  max-width: 1200px;

  display: flex;
  overflow: hidden;
  box-sizing: border-box;

  width: var(--window-width);
  height: var(--window-height);
}

.container {
  @include container();
}

// 使用 @media，可以根据设备的屏幕尺寸或方向，应用不同的 CSS 样式。
@media only screen and (min-width: 600px) {
  .tight-container {
    --window-width: 100vw;
    --window-height: var(--full-height);
    --window-content-width: calc(100% - var(--sidebar-width));

    @include container();

    max-width: 100vw;
    max-height: var(--full-height);

    border-radius: 0;
    border: 0;
  }
}

.window-content {
  width: var(--window-content-width);
  height: 100%;
  display: flex;
  flex-direction: column;
}

